<template>
  <el-form ref="dom" :model="form" :rules="rules" status-icon label-width="auto" style="padding: 20px;">
    <el-form-item label="关键词分类" prop="role_name">
      <el-input v-model="form.name" />
    </el-form-item>

    <el-form-item label="备注">
      <el-input v-model="form.remark" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button @click="close">Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive, defineEmits, defineProps, onMounted, watch } from 'vue'
import { WordTypeWordAdd as adds, WordTypeWordInfo as Info } from '../../api/api'
import { ElMessage } from 'element-plus'

import { ElForm, ElFormItem, ElInput } from 'element-plus';
const emit = defineEmits(['item']);
const dom = ref(null);
const form = ref({
})


const rules = reactive({
  name: [
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'change' },
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
  ],

})

const props = defineProps({
  id: {
    type: Number,
    default: NaN
  },
  type:{
    type:String,
    default:'add'
  }
})
onMounted(() => {
  if (props.id) {
    GetUserInfo(props.id)
  }
});
watch(() => props.id, (newVal, oldVal) => {
  console.log(newVal, oldVal)
  if (props.id) {
    GetUserInfo(props.id)
  }else{
    form.value = {};
  }


})
watch(() => props.type, (newVal, oldVal) => {
  console.log(newVal, oldVal)
  if (props.type == 'add') {
    form.value = {};
   
  }


})

const onSubmit = () => {
  console.log(dom)
  dom.value.validate((valid, fields) => {
    console.log(valid)
    if (valid) {
      console.log('submit!', valid)
      adds(form.value).then((res) => {
        console.log('res', res)
        ElMessage({
          message: res.msg,
          type: 'success',
        })
        close()
      })
    } else {
      console.log('error submit!', fields)
    }
  })

}
const close = () => {
  form.value = {};
  emit('item', 'false')
}

const GetUserInfo = (id) => {
  Info({ id: id }).then((res) => {
    console.log('res', res)
    form.value = res.data

  })
}

</script>
